<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@ page session="true" %>
<%@ page import="javax.portlet.*" %>
<%@page import ="rai.dto.*" %>
<%@page import ="rai.dao.*" %>
<%@page import = "java.util.*" %>

<%@ taglib uri="http://java.sun.com/portlet" prefix="portlet"%>
<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c"%>
<portlet:defineObjects/>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Personal Information Tracking System</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<script type="text/javascript" src='<%= request.getContextPath() + "/js/calendarDateInput.js" %>'></script>
<script type="text/javascript">
    function getForm(namespace, name) {
        return document.forms[namespace + name];
    }
    function back_to_emp_info_form(namespace, name) {
        var frm = getForm(namespace, name);
        frm.txtAction.value = "back_to_empInfo_form_2";
        frm.submit();
    }
    function back_to_login(namespace, name) {
		var frm = getForm(namespace, name);
		frm.txtAction.value = "back_to_login_form";
		frm.submit();
	}
	function add_taken_course_info(namespace,name){
		var frm = getForm(namespace, name);
		frm.txtAction.value = "add_emp_course";
		frm.submit();
		}
	function asynchGet(updateURL){
		 
	    if (window.XMLHttpRequest) {
	        portletReq = new XMLHttpRequest();
	    } else if (window.ActiveXObject) {
	        portletReq = new ActiveXObject("Microsoft.XMLHTTP");
	    }
	  // alert(updateURL+" "+ lstresponse);
	    portletReq.onreadystatechange = function() {processReqChange();};
	    
	    portletReq.open("GET", updateURL, true);
	    //alert(updateURL);
	    portletReq.send(null);
	}
	function processReqChange() {
		//alert(portletReq.status+" "+portletReq.readyState);
		//alert(lstresponse);
	    if (portletReq.readyState == 4) {
	        if (portletReq.status == 200) {
	            // process response
	            //alert("proccess");
	            displayDepartment();
	        }
	    }
	}
	function selectComp(evt) {
		
	    evt = (evt) ? evt : ((window.event) ? window.event : null);
	    if (evt) {
	    	
	        var select = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
	        if (select && select.options.length > 1) {
	        	 //alert(lstresponse);
	        	asynchGet('<%=request.getContextPath()%>'+"/AddActionServlet?lstCourse=" + select.value);
	        }
	    }
	}
		
	function displayDepartment() {
	    // substitute new invoice HTML content into "portletcontent" <div> tag
	    //alert(lstid);
	   // alert(lstresponse);
	    //alert("result"+portletReq.responseText);
	    var div = document.getElementById("courseDes");
	    //alert(portletReq.responseText);
	    div.innerHTML = "";
	   	var result = portletReq.responseText.split('######');
	    div.innerHTML = result[0];
	    div = document.getElementById('courseCom');
	    div.innerHTML = result[1];
	    div = document.getElementById('courseDept');
	    div.innerHTML = result[2];
	    div = document.getElementById('courseIssued');
	    div.innerHTML = result[3];
	    div = document.getElementById('coursePeriod');
	    div.innerHTML = result[4];
	    
	    
	}

	function init() {
		asynchGet('<%= request.getContextPath()+"/AddActionServlet?lstCourse=1"%>');
		
	}
</script>
<link href='<%=request.getContextPath() + "/css/style.css" %>' rel="stylesheet" type="text/css" media="screen" />
</head>

<body onload="init();">
<form name="<portlet:namespace/>addtkncourseForm" action="<portlet:actionURL/>" method="POST">
<input type="hidden" name="txtAction" />
<table align="center">
	<tr class="title">
			<td colspan="2">		
					<h1><a href="#">Personal information tracking system </a></h1>
					<p>exploit the value of data</p>
					<hr />

			</td>
	</tr>
	
	<tr class="title">
			<td colspan="2" align="left"> Welcome, <font color="orange"/><b>[${sessionScope.role}]${sessionScope.name}</b></font>
		| <a href="#" onclick="back_to_emp_info_form('<portlet:namespace/>','addtkncourseForm')">Home</a>
		| <a href="#" onclick="back_to_login('<portlet:namespace/>','addtkncourseForm')">Logout</a>
			
	   </td>
	</tr>

	
	<tr>	
		<td>
			<table border="1">
				<tr>
					<td><h2 class="title">Course  Information</h2></td>
				</tr>
					
				<tr>
					<td><em>General Information </em></p></td>

				</tr>
				<tr>
					<td>
						<table border="1" width="100%">							
							<tr>
							  <td align="left" valign="middle">&nbsp;Course List&nbsp;</td>
							  <td align="left" valign="middle" colspan="6"><select name="lstCourse" onchange="selectComp(event)" style="width: 135px">
							  	<%EditTakenCourseInfoDAO dao = new EditTakenCourseInfoDAO();
							  	  List<CourseDTO> lst_course= new ArrayList<CourseDTO>();
							  	  lst_course = dao.getCourse();
							  	  for(int i=0; i<lst_course.size(); i++) {
							  	      CourseDTO temp = lst_course.get(i);
							  	%>
							  		<option value='<%=temp.getId() %>'><%=temp.getSname() %></option>
							  	<%} %>
							  	</select>
							  </td>
							</tr>
							<tr>
							<td align="left" valign="middle" style="width: 140px">&nbsp;Course's Description&nbsp;</td>
							  <td align="left" valign="middle" colspan="6" style="width: 319px"><div id = "courseDes"></div></td>							  							</tr>
							<tr style="width: 585px">
							  <td align="left" valign="middle">&nbsp;Company&nbsp;</td>
							  <td colspan="6" align="left" valign="middle" style="width: 238px; height: 26px"><div id = "courseCom"></div></td>
							 </tr>
							 <tr>							
							 <td align="left" valign="middle">&nbsp;Department&nbsp;</td>
							  <td colspan="6" align="left" valign="middle" style="width: 238px; height: 26px"><div id = "courseDept"></div></td>
							  
						  </tr>
							<tr>

							  <td align="left" valign="middle">&nbsp;Course's Issued Date&nbsp;</td>
							  <td colspan="6" align="left" valign="middle"><div id = "courseIssued"></div></td>
							   							 
						  </tr>
						  <tr>

							  <td align="left" valign="middle">&nbsp;Course's Period&nbsp;</td>
							  <td colspan="6" align="left" valign="middle"> <div id = "coursePeriod"></div></td>
							   							 
						  </tr>
						  <tr>
							  <td align="left" valign="middle">&nbsp;Grade&nbsp;</td>
							  <td align="left" valign="middle" colspan = "6">								  
								  <select name="lstGrade" onchange="if(this.value=='Other'){
														this.form.otherGrade.style.visibility='visible';
														this.form.otherGrade.focus();}
												else{this.form.otherGrade.style.visibility='hidden';}"
								  style="width: 135px"> 
								  	<%dao = new EditTakenCourseInfoDAO();
								  	  List<GradeDTO> grade = new ArrayList<GradeDTO>(); 
								  	  grade=dao.getGrade();
								  	  for(int i=0;i<grade.size();i++){
								  	%>	  
								  	   	<option value='<%=grade.get(i).getGrade()%>'><%=grade.get(i).getGrade()%></option>
								  	  <%}%>
                                  </select>
					            <input name="otherGrade" type="text" style="visibility:hidden" />								</td>
							
						  </tr>

						  <tr align="left" valign="bottom">
						  	  <td colspan="7"><input type="button" name="btnUpdate" value="Add" onclick="add_taken_course_info('<portlet:namespace/>','addtkncourseForm')" style="width: 76px"/><input type="button" name="btnCancel" value="Cancel" onclick="back_to_emp_info_form('<portlet:namespace/>','addtkncourseForm')"/>
						  	  <p style=""><b><font color="red">${sessionScope.succMess}</font></b></p>
						  	  </td>

						  </tr>
				    </table>					</td>
				</tr>
			</table>			
		</td>
	</tr>
	<tr>
		<td colspan="2">
			<div style="clear: both;">&nbsp;</div>

			<div id="footer"><p>Development by HCMUT-Group3.</p>
			</div>
		</td>
	</tr>
</table>
</form>
</body>

